import React, { useState } from "react";
import { ResultPage, Card, Tabs, Input,Button ,Popup,CalendarPickerView } from "antd-mobile";
import { LoopOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import dayjs from "dayjs";

function Index() {
  let [start, setStart] = useState("");
  let [end, setEnd] = useState("");
  let nav=useNavigate()
  let[time,setTime]=useState(false)
  let [date,setDate]=useState(dayjs().format('YYYY-MM-DD'))
  const huan = () => {
    let temp = start;
    setStart(end);
    setEnd(temp);
  };
  return (
    <div>
      <ResultPage
        status=""
        title="购票系统"
        description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div>
            <Tabs>
              <Tabs.Tab title="火车票" key="fruits">
                <div className="kk">
                  <Input
                    style={{ width: "100px" }}
                    value={start}
                    onChange={(val) => {
                      setStart(val);
                    }}
                  />
                  <LoopOutline fontSize={30} onClick={() => huan()} />
                  <Input
                    style={{ width: "100px" }}
                    value={end}
                    onChange={(val) => {
                      setEnd(val);
                    }}
                  />
                </div>
                <div>
                    <span onClick={()=>setTime(true)}>{date}</span>
                </div>
                <Button block color="primary" size="large" onClick={()=>nav(`/list?start=${start}&end=${end}&date=${date}&isSpeed=${false}`)}>
                 搜索
                </Button>
              </Tabs.Tab>
              <Tabs.Tab title="飞机" key="vegetables">
                飞机
              </Tabs.Tab>
              <Tabs.Tab title="动物" key="animals">
                蚂蚁
              </Tabs.Tab>
            </Tabs>
          </div>
        </ResultPage.Card>
      </ResultPage>
      <Popup
              visible={time}
              onMaskClick={() => {
                setTime(false)
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '40vh',
              }}
            >
               <CalendarPickerView onChange={(val)=>{
                setDate(dayjs(val).format('YYYY-MM-DD'))
                setTime(false)
               }} />
            </Popup>
    </div>
  );
}

export default Index;
